/** 使用方法：在main.ts中注册指令：app.directive('modalDrag', modalDrag) */

export default { //专门用于antd Modal的移动。
   
    beforeMount(el:any) { },

    mounted(el:any) {
        let modalEl = el;
        while(modalEl){ //因为 antd 的modal上无法直接写指令 v-drag,因此将v-drag放置在modal内的元素上，然后通过modal的class找到此modal
            modalEl = modalEl.parentNode;
            if(modalEl.classList.contains('ant-modal-content')){
                break;
            }
        }
        //debugger;
        if(!modalEl)return;
        let modalHeader = modalEl.querySelector(".ant-modal-header");
        let dragEl = modalEl;// 拥有 class='ant-modal-content' 的div
        if(modalHeader){
            dragEl = modalHeader; // 拥有 class='.ant-modal-header' 的div
        }
        dragEl.onmousedown = function (e:any) { //只有Header触发事件
            var disx = e.pageX - modalEl.offsetLeft; //移动的是整个Modal
            var disy = e.pageY - modalEl.offsetTop;
            document.onmousemove = function (e) {
                modalEl.style.left = e.pageX - disx + 'px';
                modalEl.style.top = e.pageY - disy + 'px';
            }
            document.onmouseup = function () {
                document.onmousemove = document.onmouseup = null;
            }
        }
    },
    //当VNode更新的时候会执行updated，可以触发多次
    updated(el:any) { }
}


